<template>
    <div class="box">
        <div class="waterfall">
            <vue-waterfall-easy
                    ref="waterfall"
                    :imgsArr="imgsArr"
                    @scrollReachBottom="getData"
            >
                <div class="info" slot-scope="props">
                    <div class="title">{{ props.value.info}}</div>
                    <div class="price">¥ {{ props.value.price }}</div>
                </div>
            </vue-waterfall-easy>
        </div>
    </div>

</template>

<script>
    import vueWaterfallEasy from 'vue-waterfall-easy'
    import {homeContent, recommendList} from '../api/home'

    export default {
        name: "WaterFall",
        data() {
            return {
                imgsArr: [],
                page: 0,
            }
        },
        components: {
            vueWaterfallEasy
        },
        methods: {
            getData() {
                recommendList().then(res => {
                    res.data.data.map(item => {
                        this.imgsArr.push(
                            {
                                src: item.pic,
                                info: item.name,
                                price: item.price
                            })
                    })
                })
            },
        },
        mounted() {
            this.getData();
        },
    }
</script>


<style lang="less" scoped>
    @import '../common/style/mixin';

    .waterfall {
        /*height: 800px;*/
        height: 100%;

    }

    .info {
        text-align: center;

    }

    .price {
        color: #613384;
    }

</style>